<template>
  <div class="note-root">
    <div class="note-menu" :style="{height:this.$parent.fullHeight-100+'px'}">
      <p class="note-title">笔记分类</p><br>
      <ul>
        <li v-for="kind in noteKind" @click="noteKindClick(kind.name)">
          <img :src="require('../assets/images/noteClassify/'+kind.src)" :alt='kind.name' />
          <span class="kind-name">{{kind.name}}</span>
          <span>{{kind.count}}篇</span>
        </li>
      </ul>
    </div>
    <div class="note-show">
      <div class="search">
        <input id="search_input" placeholder ="输入关键字" v-model="search.context"/>
        <select id="search_condition" class="search_select" v-model="page.nowKind">
          <option value="default">全站搜索</option>
          <option v-for="kind in noteKind" :value="kind.name">{{kind.name}}</option>
        </select>
        <select class="search_select" v-model="search.sort">
          <option value="id">默认排序</option>
          <option value="view">浏览数量</option>
          <option value="time">发布时间</option>
          <option value="approve">点赞排行</option>
        </select>
        <button id="search_btn" @click="searchBtn">搜索</button>
        <i class="el-icon-loading" v-if="searchIcon"></i>
      </div>
      <div class="article-list" @scroll="orderScroll" ref="article_list" :style="{height:this.$parent.fullHeight-150+'px'}">
        <div class="article" v-for="article in articles" @click="blogDetail(article.id)">
          <img class="article-img" :src="require('../assets/images/'+article.src)" alt="主页图片">
          <div class="blog-title">
            <p>{{article.title}}</p>
          </div>
          <span class="page-view">浏览：{{article.view}}</span>
          <span class="approve">点赞：{{article.approve}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    export default {
      name: "Note",
      data() {
        return {
          scrollHeight: '',  //滑动时记录高度
          noteKind: [],  //文章类型
          articles: [], //文章集合
          page: {
            nowKind: 'default',  //当前选中类型
            totalPage:1,  //总页数
            currentPage: 1,  //当前页码
          },
          orderScrollFlag: true,  //用来标识下拉是否要请求数据
          search:{
            context: '',  //搜索文本
            sort: 'id',  //文章排序方式
          },
          searchIcon: false,  //控制搜索时转圈圈
          fullHeight: this.$parent.fullHeight
        }
      },
      methods: {
        /* 类型名、当前页码、排序方式、搜索文本 */
        requestArticle(kindName,currentPage,sort,searchText){
          let _this = this;
          //取得总记录数
          let blogCount = 0;
          if(kindName==="default"){
            this.noteKind.forEach(function(e){
                blogCount += e.count;
            });
          } else {
            this.noteKind.forEach(function(e){
              if(e.name===kindName){
                blogCount = e.count;
              }
            });
          }
          //计算总页数
          let temp = blogCount % 10;
          _this.page.totalPage = temp===0 ? blogCount/10:Math.ceil(blogCount/10);
          if(blogCount === '0'){
            _this.$message.warning('哦噢，什么都没有！！');
          }else {
            if(currentPage <= _this.page.totalPage){
              _this.searchIcon = true;
              //发送请求
              _this.$axios({
                method:'post',
                params:{
                  kindName: kindName,
                  currentPage: currentPage,
                  sort: sort,
                  context: searchText
                },
                url:'http://localhost:8081/findBlog'
              }).then((response) =>{
                _this.page.nowKind = kindName;
                _this.articles = _this.articles.concat(response.data);
                _this.page.currentPage = currentPage+1;
                _this.search.context = searchText;
                _this.searchIcon = false;
                _this.orderScrollFlag = true;
              }).catch(() =>{
                _this.$message.error('抱歉，数据加载失败！！');
                _this.searchIcon = false;
                _this.orderScrollFlag = true;
                }
              )
            }
          }
        },

        //点击笔记分类
        noteKindClick(kindName){
          this.page.nowKind = kindName;
          this.articles = [];
          this.requestArticle(kindName,1,"id","");
        },

        // 滚动到底部自动加载
        orderScroll(){
          let _this = this;
          let totalPage = this.page.totalPage;
          let kindName = this.page.nowKind;
          let sort = this.search.sort;
          let currentPage = this.page.currentPage;
          let searchText = this.search.context;
          let a = _this.$refs.article_list.scrollHeight;  //内容高度
          let b = _this.$refs.article_list.clientHeight; //可视区
          let c = _this.$refs.article_list.scrollTop;  //距离顶部
          if (this.orderScrollFlag && b+c >= a-300){
            _this.orderScrollFlag = false;
            _this.requestArticle(kindName,currentPage,sort,searchText);
          }if(_this.page.currentPage > _this.page.totalPage && b+c >= a-300) {
            _this.$message.warning('哦噢，到底了！！');
          }
        },

        //搜索
        searchBtn(){
          this.articles = [];
          this.requestArticle(this.page.nowKind,1,this.search.sort,this.search.context);
        },
        //跳转博客详情
        blogDetail(id){
          let bogDetail = this.$router.resolve({
            query: {id: id},
            path:'/BlogDetail'
          });
          window.open(bogDetail.href, '_blank');
        },
      },
      mounted() {
        this.$axios({
          method: 'post',
          url: 'http://localhost:8081/findNodeKind'
        }).then((response) => {          //这里使用了ES6的语法
          this.noteKind = response.data;
        }).catch(() =>
          this.$message({
            message: '笔记列表加载失败，刷新试试',
            type: 'error',
            offset: 200
          })
        );
      },
      watch: {
        'search.sort': {
          // 数据发生变化就会调用这个函数
          handler() {
            this.articles = [];
            this.requestArticle(this.page.nowKind,1,this.search.sort,this.search.context)
          },
          deep: true
        }
      }
    }
</script>

<style scoped>
  .note-root{
    clear: both;
    display: inline-block;
    background: #eaeaea;
    border-radius: 15px;
  }
  .note-menu{
    float: left;
    overflow: auto;
    width: 250px;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-height: 480px;
  }
  .note-menu::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .note-menu::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #535353;
  }
  .note-menu::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #ededed;
  }
  @keyframes example {
    20% {
      -webkit-transform: rotate(10deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(10deg);
      -moz-transform-origin: top center;
      transform: rotate(10deg);
      transform-origin: top center;
    }
    40% {
      -webkit-transform: rotate(20deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(20deg);
      -moz-transform-origin: top center;
      transform: rotate(20deg);
      transform-origin: top center;
    }
    60% {
      -webkit-transform: rotate(10deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(10deg);
      -moz-transform-origin: top center;
      transform: rotate(10deg);
      transform-origin: top center;
    }
    80% {
      -webkit-transform: rotate(-10deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(-10deg);
      -moz-transform-origin: top center;
      transform: rotate(-10deg);
      transform-origin: top center;
    }
    100% {
      -webkit-transform: rotate(0deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(0deg);
      -moz-transform-origin: top center;
      transform: rotate(0deg);
      transform-origin: top center;
    }
  }
  .note-title{
    float: left;
    font-size: 13px;
    width: 170px;
    background: #d9d9d9;
    padding: 5px 5px 5px 5px;
    margin-top: 0;
    margin-left: 40px;
    margin-bottom: 10px;
    border-radius: 10px;
    font-weight: bold;
    transition-duration:2s;
    text-align: center;
  }
  .note-title:hover{
    animation-name: example;
    animation-duration: 500ms;
    animation-timing-function: linear;
    animation-iteration-count: 2;
  }
  .note-menu ul li{
    clear:both;
    list-style: none;
    margin-bottom: 15px;
    font-size: 12px;
  }
  .note-menu ul li:hover{
    cursor: pointer;
  }
  .note-menu ul li:hover img{
    transform: rotate(360deg);
  }
  .note-menu ul li span{
    transition: 500ms;
  }
  .note-menu ul li:hover span{
    color: #b64238;
    font-size: 15px;
  }
  .note-menu ul li img{
    width: 30px;
    height: 30px;
    vertical-align:middle;
    margin-right: 15px;
    transition-duration:1s;
  }
  .kind-name{
    display:inline-block;
    width: 90px;
  }
  .note-show{
    margin-left: 270px;
    float: left;
  }
  .search{
    margin-left: 20px;
  }
  #search_input{
    border: 1px solid #DADADA;
    border-radius: 10px;
    color: #888;
    height: 25px;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 0 3px 0 5px;
    width: 200px;
    line-height:15px;
    box-shadow: inset 0 1px 4px #ECECEC;
    -moz-box-shadow: inset 0 1px 4px #ECECEC;
    -webkit-box-shadow: inset 0 1px 4px #ECECEC;
  }
  .search_select{
    border: 1px solid #DADADA;
    border-radius: 10px;
    color: #888;
    height: 27px;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 0 3px 0 5px;
    width: 90px;
    line-height:15px;
    box-shadow: inset 0 1px 4px #ECECEC;
    -moz-box-shadow: inset 0 1px 4px #ECECEC;
    -webkit-box-shadow: inset 0 1px 4px #ECECEC;
  }
  #search_btn{
    width: 80px;
    height: 25px;
    border: none;
    border-radius: 10px;
    color: #888;
    background: #e2e2e2;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 0 3px 0 5px;
    line-height:15px;
    box-shadow: 2px 2px 2px rgba(110, 110, 110, 0.97);
  }
  #search_btn:active{
    transform: translateY(3px);
    box-shadow: 3px 3px 3px rgba(22, 22, 22, 0.97);
  }
  .article-list {
    float: left;
    overflow-y: auto;
    min-height: 460px;
    margin-right: 15px;
  }
  .article-list::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .article-list::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #535353;
  }
  .article-list::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #ededed;
  }
  .article{
    float: left;
    padding:  5px 5px 5px 5px;
    margin:  5px 5px 10px 20px;
    list-style: none;
    box-shadow: 0 0 6px rgba(147, 147, 147, 0.89);
    border-radius: 15px;
    overflow:hidden;
  }
  .article:hover{
    background: rgba(89, 148, 225, 0.17);
  }
  .article-img{
    width: 210px;
    height: 130px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 auto;
  }
  .blog-title{
    font-weight: bold;
    width: 210px;
    height: 50px;
    font-size: 10px;
  }
  .blog-title:hover{
    cursor: pointer;
  }
  .blog-title p{
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;	/*控制文字行数*/
  }
  .page-view{
    float: left;
    color: #635699;
    font-size: 6px;
    margin-left: 10px;
  }
  .approve{
    float: right;
    color: #635699;
    font-size: 6px;
    margin-right: 10px;
  }
</style>
